import { useState } from "react";
import { Button, Form, Modal, Table, Input, Select } from "antd";
import createTreeList from "@/utils/treeList";
import { setMenuApi } from "./apis";
const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    align: "center",
  },
  {
    title: "层级",
    dataIndex: "level",
    key: "level",
    align: "center",
  },
  {
    title: "菜单名",
    dataIndex: "label",
    key: "label",
    align: "center",
  },
  {
    title: "pid",
    dataIndex: "pid",
    key: "pid",
    align: "center",
  },
];
const Home = () => {
  const [form] = Form.useForm();
  const [tableData, setTableData] = useState(
    JSON.parse(sessionStorage.getItem("menuList")) || []
  );
  const [open, setOpen] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const [clickItem, setClickItem] = useState(null)
  const closeModal = () => {
    setOpen(false);
    setClickItem(null)
    isEdit(false)
  };
  const showModal = (record) => {
    setIsEdit(record ? true : false);
    if (record) {
      form.setFieldsValue({
        level: record.level,
        label: record.label,
        menu: record.pid,
        key: record.url,
      });
      setClickItem(record)
    } else {
      form.resetFields();
    }
    setOpen(true);
  };

  const handEdit = () => {
    form.submit();
    form.validateFields().then(async () => {
      const value = form.getFieldsValue();
      const data = {
        level: value.level,
        label: value.label,
        pid: value.menu,
        url: value.key,
      };
      const res = await setMenuApi(clickItem.id, data);
      if (!res.data.success) return;
      setTableData(res.data.data);
      closeModal()
    });
  };

  const EDIT = {
    title: "操作",
    width: 160,
    align: "center",
    render: (_, record) => (
      <>
        <Button size="small" type="link" onClick={() => showModal(record)}>
          编辑
        </Button>
        <Button size="small" type="link" danger>
          删除
        </Button>
      </>
    ),
  };
  return (
    <div>
      <Table
        border="dark-50"
        columns={[...columns, EDIT]}
        dataSource={createTreeList(tableData, 0)}
      />
      <Modal
        style={{ padding: 12 }}
        title={`${isEdit ? "编辑" : "新增"}菜单`}
        open={open}
        width={500}
        onCancel={closeModal}
        onOk={handEdit}
      >
        <Form labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} form={form}>
          <Form.Item name="level" label="层级">
            <Input />
          </Form.Item>
          <Form.Item name="label" label="菜单名">
            <Input />
          </Form.Item>
          <Form.Item name="key" label="地址">
            <Input />
          </Form.Item>
          <Form.Item name="menu" label="父级菜单">
            <Select
              options={[
                { label: "一级菜单", value: 0 },
                ...tableData.map((item) => {
                  return {
                    label: item.label,
                    value: item.id,
                  };
                }),
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Home;
